<template>
  <view class="headerSearch">
    <!-- 2.0.19支持autoBack，默认为false -->
    <uv-navbar
        :autoBack="autoBack"
        :bg-color="bgColor"
        :leftIconSize="leftIconSize"
        :leftIconColor="leftIconColor"
        :titleStyle="{fontWeight: 600,fontSize:'36rpx'}"
        @leftClick="leftClick"
        :placeholder="true"
    >
      <template #center>
        <uv-search :placeholder="placeholderTitle" :clearabled="true"  shape="round" v-model="keyword" @change="change" @custom="change" @focus="focus"
                  bgColor="#ffffff"  height="56rpx"  margin="0 222rpx 0 70rpx" :showAction="showAction" @click="click" :disabled="disabled"  @clear="clear"
                   :inputStyle="{width:'240rpx'}" :actionStyle="{color:'#3775F6'}"
        ></uv-search>
      </template>
    </uv-navbar>
  </view>
</template>
<script setup>
import {ref, getCurrentInstance, watchEffect, defineEmits} from 'vue'

const props = defineProps({
  // 背景色
  bgColor: {
    type: String,
    default: 'linear-gradient(to bottom, rgb(234, 239, 246) 60%, rgba(244,244,244,1))'
  },
  // 返回图标大小
  leftIconSize: {
    type: String,
    default: '40rpx'
  },
  leftIconColor: {
    type: String,
    default: '#000'
  },
  placeholderTitle: {
    type: String,
    default: '请输入搜索内容'
  },
  autoBack: {
    type: Boolean,
    default: true
  },
  keywordName: {
    type: String,
    default: ''
  },
  showAction:{
    type: Boolean,
    default: true
  },
  disabled: {         // disabled为true时，点击输入框，发出此事件，用于跳转搜索页
    type: Boolean,
    default: false
  }
})
const keyword = ref(null);
const emits = defineEmits(['search','leftClick', 'focus', "click"]);
let change = () => {
  emits('search',keyword.value);
}
let focus = () => {
  emits('focus',keyword.value);
}
let click = () => {
  emits('click',keyword.value);
}
let leftClick=()=>{
  if(!props.autoBack) {
    emits('leftClick')
  }
}
let clear = () => {
  emits('clear',keyword.value);
}
watchEffect(()=>{
  keyword.value = props.keywordName;
})
</script>
<style lang="scss" scoped>
::v-deep .uv-navbar__content {
  background-color: transparent;
}

</style>
